<template>
	<view class="activitiesParticipated_box box pd">
		<view class="account_container">
			<view class="account_conatiner_top_bar">
				<view class="" style="margin-right: 20rpx;" @click="goback">
					<image src="../../static/back.png" mode="" style="width: 36rpx;height: 36rpx;"></image>
				</view>
				<view class="">
					我发起的活动
				</view>
			</view>
			<view class="tab">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0 &&myActiveDataArr.length>0">
						<view class="tab_item" @click="gotoActiveDetail(item,index)"
							v-for="(item,index) in myActiveDataArr" style="margin-bottom:40rpx;" :key="index">
							<view class="tab_item_top">
								<view class="tab_item_top_left">
									<text v-if="item.activityForm==1">线下活动</text>
									<text v-if="item.activityForm==2">线上活动</text>
								</view>
								<view class="tab_item_top_right">
									<text v-if="item.status==1">草稿</text>
									<text v-if="item.status==2">待审核</text>
									<text v-if="item.status==3">审核通过</text>
									<text v-if="item.status==5">报名截止</text>
									<text v-if="item.status==7">活动进行中</text>
									<text v-if="item.status==9">活动已结束</text>
									<text v-if="item.status==11">活动已下架</text>
								</view>
							</view>
							<view class="tab_item_center">
								<view class="tab_item_center_left">
									<img :src="item.image" alt="" />
								</view>
								<view class="tab_item_center_right">
									<view class="tab_item_center_right_top">
										{{item.title||'暂无'}}
									</view>
									<view class="tab_item_center_right_bottom">
										{{startTimeArr[index] || '未知'}}
									</view>
								</view>
							</view>
							<view class="" style="display: flex;">
								<!-- <view class="">
									<image :src="item.image" mode="" style="width: 47rpx;height: 48rpx;">
									</image>
								</view> -->

							</view>
							<view class="tab_item_bottom">
								<view class="" style="margin-left:20rpx;" v-if="item.status!=1">
									已有{{totalUser||0}}人报名参与
								</view>
								<view class="" v-if="item.status==1" @click="gotoEdit(item,index)">
									<text>编辑</text>
								</view>
								<view class="">
									总收入 ¥ {{item.totalAmount|| 0}}
								</view>
							</view>
						</view>
					</view>
					<view v-if="current === 1 &&myActiveDataArr.length>0">
						<view class="tab_item" @click="gotoActiveDetail" v-for="(item,index) in myActiveDataArr"
							:key="index" style="margin-bottom:40rpx;">
							<view class="tab_item_top">
								<view class="tab_item_top_left">
									线下活动
								</view>
								<view class="tab_item_top_right">
									待核销
								</view>
							</view>
							<view class="tab_item_center">
								<view class="tab_item_center_left">
									<img :src="item.image" alt="" />
								</view>
								<view class="tab_item_center_right">
									<view class="tab_item_center_right_top">
										{{item.title||'暂无'}}
									</view>
									<view class="tab_item_center_right_bottom">
										{{startTimeArr[index] || '未知'}}
									</view>
								</view>
							</view>
							<view class="tab_item_bottom" style="color: #FA301B;">
								<view class="" style="margin-left:20rpx;" v-if="item.status!=1">
									已有{{totalUser||0}}人报名参与
								</view>
								<view class="" v-if="item.status==1" @click="gotoEdit(item,index)">
									<text>编辑</text>
								</view>
								总收入 ¥ {{item.totalAmount|| 0}}
							</view>
						</view>
					</view>
					<view v-if="current === 2 &&myActiveDataArr.length>0">
						<view class="tab_item" @click="gotoActiveDetail" v-for="(item,index) in myActiveDataArr"
							:key="index" style="margin-bottom:40rpx;">
							<view class="tab_item_top">
								<view class="tab_item_top_left">
									线下活动
								</view>
								<view class="tab_item_top_right">
									待核销
								</view>
							</view>
							<view class="tab_item_center">
								<view class="tab_item_center_left">
									<img :src="item.image" alt="" />
								</view>
								<view class="tab_item_center_right">
									<view class="tab_item_center_right_top">
										{{item.title||'暂无'}}
									</view>
									<view class="tab_item_center_right_bottom">
										{{startTimeArr[index] || '未知'}}
									</view>
								</view>
							</view>
							<view class="" style="display: flex;">
								<!-- <view class="">
										<image :src="item.image" mode="" style="width: 47rpx;height: 48rpx;">
										</image>
									</view> -->

							</view>
							<view class="tab_item_bottom">
								<view class="" style="margin-left:20rpx;" v-if="item.status!=1">
									已有{{totalUser||0}}人报名参与
								</view>
								<view class="" v-if="item.status==1" @click="gotoEdit(item,index)">
									<text>编辑</text>
								</view>
								总收入 ¥ {{item.totalAmount|| 0}}
							</view>
						</view>
					</view>
					<view v-if="current === 3 &&myActiveDataArr.length>0">
						<view class="tab_item" @click="gotoActiveDetail" v-for="(item,index) in myActiveDataArr"
							:key="index" style="margin-bottom:40rpx;">
							<view class="tab_item_top">
								<view class="tab_item_top_left">
									线下活动
								</view>
								<view class="tab_item_top_right">
									待核销
								</view>
							</view>
							<view class="tab_item_center">
								<view class="tab_item_center_left">
									<img :src="item.image" alt="" />
								</view>
								<view class="tab_item_center_right">
									<view class="tab_item_center_right_top">
										{{item.title||'暂无'}}
									</view>
									<view class="tab_item_center_right_bottom">
										{{startTimeArr[index] || '未知'}}
									</view>
								</view>
							</view>
							<!-- <view class="" style="display: flex;">
							
							</view> -->
							<view class="tab_item_bottom">
								<view class="" style="margin-left:20rpx;" v-if="item.status!=1">
									已有{{totalUser||0}}人报名参与
								</view>
								<view class="" v-if="item.status==1" @click="gotoEdit(item,index)">
									<text>编辑</text>
								</view>
								总收入 ¥ {{item.totalAmount|| 0}}
							</view>
						</view>
					</view>
					<text class="nonemore" v-if="total<10">没有更多了</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myActive
	} from "../../api/request.js"

	export default {
		data() {
			return {
				items: ['全部', '报名中', '进行中', '其他'],
				current: 0,
				colorIndex: 0,
				activeColor: '#FA301B',
				styleType: 'text',
				myActiveData: [{
					id: "",
					title: "",
					image: "",
					startTime: 0,
					address: "",
					latitude: 0,
					longitude: 0,
					activityForm: "",
					status: "",
					totalUser: 0,
					totalAmount: ""
				}],
				myActiveDataArr: [],
				waitPay: [],
				myActivityQueryVo: {
					status: 1,
					pageNo: 1
				},
				startTimeArr: [],
				pageNo: 1,
				total: 0,
				currentStatus: 1
			};
		},
		async onLoad() {
			await this.getMyActive(1, 1)
		},
		async onReachBottom(e) {
			console.log(this.total / 10, this.pageNo, this.total);
			if (this.pageNo <= this.total / 10 + 1) {
				this.pageNo += 1
				this.getMyActive(this.pageNo)
				console.log(this.pageNo);
			} else {
				uni.showToast({
					icon: "none",
					title: "已加载全部了"
				})
				console.log('加载不存在的数据');
			}

		},
		onShow() {

		},
		methods: {
			gotoEdit(item, index) {
				getApp().globalData.activeId = item.id
				getApp().globalData.isEdit = true
				uni.switchTab({
					url: "/pages/releaseActivity/releaseActivity"
				})
			},
			async getMyActive(num) {
				let result = await myActive({
					status: this.currentStatus,
					pageNo: this.pageNo
				});
				result.records.map((item) => {
					this.myActiveDataArr.push(item)
				})
				this.total = result.total
			},
			async onClickItem(e) {
				this.pageNo = 1
				this.myActiveDataArr = []
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					this.currentStatus = e.currentIndex + 1
				}
				let result = await this.getMyActive(e.currentIndex + 1)
				console.log(result, 'result');
			},
			goback() {
				uni.switchTab({
					url: "/pages/mine/mine"
				})
				// uni.navigateBack()
			},
			gotoActiveDetail(item, index) {
				console.log(item);
				if (item.status == 1) {
					return
				}
				const {
					id
				} = item
				uni.navigateTo({
					url: "/pages/eventDetails/eventDetails?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss">
	.nonemore {
		width: 100%;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #A3A3A3;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
		display: inline-block;
		margin-top: 40rpx;
	}

	.account_container {
		width: 90%;
		margin: auto;
		margin-top: 88rpx;

		.account_conatiner_top_bar {
			margin-bottom: 20rpx;
			display: flex;
		}
	}

	.tab {
		.content {
			margin-top: 60rpx;

			.tab_item {
				height: 408rpx;
				background: #FAFAFA;
				border-radius: 24rpx;
				border: 2rpx solid #F3F3F3;
				display: flex;
				flex-direction: column;

				.tab_item_top {
					display: flex;
					justify-content: space-between;
					width: 94%;
					height: 80rpx;

					.tab_item_top_left {
						margin-left: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #A3A3A3;
						line-height: 80rpx;
						font-style: normal;
					}

					.tab_item_top_right {

						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #A3A3A3;
						line-height: 80rpx;
						font-style: normal;
					}


				}

				.tab_item_center {
					display: flex;
					height: 242rpx;
					background-color: white;
					padding: 20rpx;

					.tab_item_center_left {
						margin-left: 2rpx;
						margin-top: 20rpx;
						margin-right: 24rpx;

						image {
							width: 230rpx;
							height: 160rpx;
						}
					}

					.tab_item_center_right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 160rpx;
						margin-top: 20rpx;
						height: 160rpx;

						.tab_item_center_right_top {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #1A0200;
							font-style: normal;
							height: 80rpx;
						}

						.tab_item_center_right_bottom {
							font-family: DINAlternate, DINAlternate;
							font-size: 24rpx;
							color: #000000;
							line-height: 88rpx;
							font-style: normal;
						}
					}
				}


				.tab_item_bottom {
					height: 90rpx;
					margin-right: 20rpx;
					background-color: white;
					font-family: DINAlternate, DINAlternate;
					font-weight: bold;
					font-size: 28rpx;

					line-height: 90rpx;
					width: 100%;
					text-align: right;
					font-style: normal;
					display: flex;
					justify-content: space-between;
					width: 90%;
					margin: auto;
				}
			}
		}
	}
</style>